import React, { useState } from "react";
import { TimeRangePicker } from "@ct0/ui";
import PanelTemplate from "./panelTemplate";

export default function TimeRangePickerPanel() {
  const [time, setTime] = useState("PT5M");
  const onChange = (value) => {
    setTime(value);
  };
  const data = {
    title: "TimeRangePicker组件",
    descriptions: ["支持选择 相对、预置、绝对 三种类型的时间范围"],
    content: {
      title: "代码演示",
      children: [
        {
          title: "禁用",
          descriptions: "",
          component: <TimeRangePicker defaultValue={time} disabled />,
          codeSnippet: `import { TimeRangePicker } from '@ct0/ui'

ReactDOM.render(
    <TimeRangePicker disabled defaultValue="PT5M" />,
    mountNode
)
`,
        },
        {
          title: "相对时间_最近5分钟",
          descriptions: "",
          component: <TimeRangePicker onChange={onChange} value={time} />,
          codeSnippet: `import { TimeRangePicker } from '@ct0/ui'

ReactDOM.render(
    <TimeRangePicker onChange={onChange} defaultValue="PT5M" />,
    mountNode
)
`,
        },
        {
          title: "预置时间_上周",
          descriptions: "",
          component: (
            <TimeRangePicker
              onChange={onChange}
              defaultValue="LAST_WEEK"
              placement="topRight"
            />
          ),
          codeSnippet: `import { TimeRangePicker } from '@ct0/ui'

ReactDOM.render(
    <TimeRangePicker onChange={onChange} defaultValue="LAST_WEEK" />,
    mountNode
)
`,
        },
        {
          title: "绝对时间",
          descriptions: "",
          component: (
            <TimeRangePicker
              onChange={onChange}
              defaultValue="1656653541857/1657171941857"
            />
          ),
          codeSnippet: `import { TimeRangePicker } from '@ct0/ui'

ReactDOM.render(
    <TimeRangePicker onChange={onChange} defaultValue="1656653541857/1657171941857" />,
    mountNode
)
`,
        },
        {
          title: "Time.value转为时间戳方法",
          descriptions: "",
          component: (
            <TimeRangePicker
              onChange={onChange}
              defaultValue="1656653541857/1657171941857"
            />
          ),
          codeSnippet: `import { TimeRangePicker } from '@ct0/ui'

const { transTimeValueStringToTimestamp } = TimeRangePicker

const { start: relativeStart, end: relativeEnd } = transTimeValueStringToTimestamp("PT5M")

const { start: presetStart, end: presetEnd } = transTimeValueStringToTimestamp("LAST_WEEK")

const { start: absoluteStart, end: absoluteEnd } = transTimeValueStringToTimestamp("1656653541857/1657171941857")
`,
        },
      ],
    },
    componentApi: [
      {
        param: "value",
        description: "时间值",
        type: "string",
        default: "",
        required: false,
      },
      {
        param: "defaultValue",
        description: "默认时间值",
        type: "string",
        default: "",
        required: false,
      },
      {
        param: "relativeItems",
        description: "自定义相对时间间隔选项(支持年、月、日、时、分)",
        type: "isoDurationString[] ",
        default:
          "['PT5M', 'PT10M', 'PT15M', 'PT30M', 'PT1H', 'PT2H', 'PT6H', 'PT12H']",
        required: false,
      },
      {
        param: "presetItems",
        description: "预置的绝对时间选项",
        type: "<'TODAY'｜ 'YESTERDAY' ｜ 'THIS_WEEK' ｜ 'LAST_WEEK' ｜ 'THIS_MONTH' ｜ 'LAST_MONTH'>[]",
        default:
          "['TODAY', 'YESTERDAY', 'THIS_WEEK', 'LAST_WEEK', 'THIS_MONTH', 'LAST_MONTH']",
        required: false,
      },
      {
        param: "onChange",
        description: "时间更改后的回调函数",
        type: "(value: string, timestamp: {start: number, end: number}) => void}",
        default: "",
        required: false,
      },
      {
        param: "getPopupContainer",
        description: "浮层渲染父节点",
        type: "function",
        default: "默认渲染到body上",
        required: false,
      },
      {
        param: "placement",
        description: "弹出层位置",
        type: "string, 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight' ",
        default: "",
        required: false,
      },
      {
        param: "disabled",
        description: "是否禁用",
        type: "boolean",
        default: "false",
        required: false,
      },
      {
        param: "durationUnitOptions",
        description: "自定义相对时间的可选单位项",
        type: "{ value: 'm' | 'h' | 'd' | 'M' | 'y', label: string}[]",
        default:
          '[{ value: "m", label: "分钟" },\n' +
          '  { value: "h", label: "小时" },\n' +
          '  { value: "d", label: "天" },\n' +
          '  { value: "M", label: "月" },\n' +
          '  { value: "y", label: "年" }]',
        required: false,
      },
    ],
  };
  return <PanelTemplate {...data} />;
}
